<template>
  <div>
    <!-- 引入导航栏组件标签 -->
    <navigation title="编辑资料"></navigation>
    <!-- 头像 -->
    <div class="avator">
      <!-- 在vant UI添加上传的组件 -->
      <van-uploader class="upload" :after-read="afterRead"><img v-if='userinfo.head_img' :src="userinfo.head_img" alt /><img v-else src="../assets/xixi.png" alt /></van-uploader>
    </div>
    <!-- 引入条形封装条的标签 -->
    <Personalliber focusText="昵称" :disliberText="userinfo.nickname" @checkclick='show=true'></Personalliber>
    <van-dialog v-model="show" title='编辑昵称' show-cancel-button @confirm='handnickname'>
           <van-field v-model="nickname"  placeholder="请输入要修改的昵称" />
    </van-dialog>
    <!-- 引入条形封装条的标签,动态的赋值密码框的值 -->
    <Personalliber focusText="密码" :disliberText="userinfo.password" @checkclick='hello=true'></Personalliber>
    <van-dialog v-model="hello" title="请输入你的密码" show-cancel-button @confirm='handpassword'>
           <van-field v-model="password"  placeholder="请输入要修改的密码" type="password"/>
    </van-dialog>
    <!-- 引入条形封装条的标签，动态的赋值性别框的值，利用数组的形式，数组的索引为0，代表的是女性，索引为1代表的是男性 -->
    <Personalliber focusText="性别" :disliberText='["女","男"][userinfo.gender]' @checkclick="genergel=true"></Personalliber>
   <van-dialog v-model="genergel" title="请修改性别" show-cancel-button @confirm="handgender">
             <van-radio-group v-model="gender" direction="horizontal" class="genderrender">
              <van-radio name="1">男</van-radio>
              <van-radio name="0">女</van-radio>
    </van-radio-group>
    <!-- <van-action-sheet v-model="genergel" :actions="genderlist" cancel-text="取消" @select="handgender" /> -->
    </van-dialog>
    
  </div>
</template>

<script>
//引入导航栏模块
import navigation from "../components/navgitar";
//引入封装条形
import Personalliber from "../components/liberbar";
export default {
  data() {
    //定义变量为userinfo，用来存放数据
    return {
      userinfo: {}, //返回的数据
      show:false, //代表的是修改昵称的显示或者隐藏，默认为隐藏
      genergel:false, //代表的是修改性别的显示或者隐藏，默认为隐藏
      hello:false, //代表的是修改密码显示或者隐藏，默认为隐藏
      nickname:'', //双向绑定昵称
      head_img:'', //双向绑定图片
      password:'', //双向绑定密码
      gender:'', //双向绑定性别
      genderlist:[{
        name:'男'
      },{
        name:'女'
      }]
    };
  },
  components: {
    //   注册数据，navigation导航条和Personalliber条形封装条
    navigation,
    Personalliber,
  },
  mounted() {
    //在页面加载的时候，获取到用户信息，并且用于数据的回显
   this.render();
  },
  methods: {
    //这里做一个获取到用户信息的封装函数，因为在后面基本可以用到
      render() {
    let id = localStorage.getItem("userId"); //获取到里面的localStorage里面的值
    //   当页面加载的时候，发起axios请求
    this.$axios({
      url: "/user/" + id, //请求地址
      headers: {
        //因为这里进入到每个页面都是需要得到token值才可以进去，那么这里需要设置一个请求头
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    }).then((res) => {
      //请求成功返回的参数
      console.log(res);
      const { data, message } = res.data; //解构出返回返回体的数据
      this.userinfo = data; //并且用userinfo去接受它的值
    });
    },
    // 当上传图片的时候，发起axios请求
    afterRead(file) {
      //手动的获取到表单的json对象
      const formdata = new FormData();
      //   并且在里面添加file元素TF 
      formdata.append("file", file.file);
      let id = this.userinfo.id;
      console.log(id);
      console.log(file);
      this.$axios({
        url: "/upload", //请求地址
        method: "post", //请求方式
        headers: {
          //请求头设置
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
        data: formdata, //请求方式
      }).then((res) => {
        //请求成功获取到的参数
        console.log(res);
        const { url } = res.data.data; //将得到的返回体的图片路径用res.data.data解构出来
        console.log(url);
        this.head_img = "http://127.0.0.1:3000"+url; //并且将图片的路径修改为得到的url
        console.log(this.userinfo.head_img);
      this.renderss({
        head_img: this.head_img
      })
      });
      //  因为在上一步的请求中，只是上传了图片仅此而已，并没有真正的修改图片，所以这里需要继续发起axios请求，来编辑参数     
    },
   //因为接下来的步骤都是使用了编辑的东西，而且这里的改变的只是参数的改变
  //  编辑用户的封装函数
    renderss(data){
       let id = this.userinfo.id;
        this.$axios({
        url: "/user_update/" + id,      
        method: "post",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
        data,
      }).then((res) => {
        this.$dialog.alert({
        message: "修改成功",
        });
        this.render();
      });    
    },
    // 修改昵称
    handnickname(){
        this.renderss( {
         nickname: this.nickname
       })  
    },
    // 修改密码
    handpassword(){
        this.renderss({
            password:this.password
        })
    },
    // 修改性别
    handgender(item){
        // console.log(this.gender);
        this.renderss({
           gender:this.gender
        })
        // console.log(item);
    }
  },
};
</script>

<style lang='less' scoped>
.avator {
  display: flex;
  padding: 20/360 * 100vw;
  justify-content: center;
  align-items: center;
  position: relative;
  img {
    width: 100/360 * 100vw;
    height: 100/360 * 100vw;
    border-radius: 50%;
  }
  .genderrender{
      text-align: center;
  }
  // .upload {
  //   position: absolute;
  //   width: 300/360 * 100vw;
  //   height: 300/360 * 100vw;
  //   left: 50%;
  //   top: 50%;
  //   transform: translateX(-30/360 * 100vw;) translateY(-30/360 * 100vw;);
  //   opacity: 0;
  // }
}
</style>